<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<title>食谱详情</title>
		<link rel="stylesheet" href="css/index.css" />
		<link rel="stylesheet" href="css/view_recipes.css" />
		<link rel="stylesheet" href="css/best_recipe.css" />
		<link rel="stylesheet" href="layer/skin/layer.css" />
		<style>
			.header {
				text-align: center;
			}
			
			.search_input {
				width: 70%;
				margin: 0 auto;
			}
			
			.search_input input {
				height: 30px;
				padding-top: 2px;
				text-align: center;
			}
			
			.li_inner img {
				height: 70px;
			}
		</style>
	</head>

	<body>
		<header>
			<div class="header">
				<span class="go_back"></span>
				<div class="search_input">
					<span class="search_icon"></span>
					<input type="text" placeholder="请输入食谱名称" id="search_key" />
				</div>
				<span class="go_search" id="to_search">搜索</span>
			</div>
		</header>
		<div class="top"></div>
		<section>
			<div class="tab_item" style="display: block;padding: 20px 10px;">
				<dl>
					<dd class="tab_li">
						<div class="li_inner">
							<img src="images/best_recipe/tang@3x.png" alt="食谱图" />
							<span class="food_name">蘑菇浓汤</span>
							<span class="author_name">by:张某某</span>
							<span class="see"></span>
						</div>
					</dd>
					<dd class="tab_li">
						<div class="li_inner">
							<img src="images/best_recipe/tang@3x.png" alt="食谱图" />
							<span class="food_name">蘑菇浓汤</span>
							<span class="author_name">by:张某某</span>
							<span class="see"></span>
						</div>
					</dd>
					<dd class="tab_li">
						<div class="li_inner">
							<img src="images/best_recipe/tang@3x.png" alt="食谱图" />
							<span class="food_name">蘑菇浓汤</span>
							<span class="author_name">by:张某某</span>
							<span class="see"></span>
						</div>
					</dd>
					<dd class="tab_li">
						<div class="li_inner">
							<img src="images/best_recipe/tang@3x.png" alt="食谱图" />
							<span class="food_name">蘑菇浓汤</span>
							<span class="author_name">by:张某某</span>
							<span class="see"></span>
						</div>
					</dd>
					<dd class="tab_li">
						<div class="li_inner">
							<img src="images/best_recipe/tang@3x.png" alt="食谱图" />
							<span class="food_name">蘑菇浓汤</span>
							<span class="author_name">by:张某某</span>
							<span class="see"></span>
						</div>
					</dd>
					<dd class="tab_li">
						<div class="li_inner">
							<img src="images/best_recipe/tang@3x.png" alt="食谱图" />
							<span class="food_name">蘑菇浓汤</span>
							<span class="author_name">by:张某某</span>
							<span class="see"></span>
						</div>
					</dd>
					<div class="blank"></div>
				</dl>
			</div>
		</section>
		<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
		<script type="text/javascript" src="js/bodySize.js"></script>
		<script type="text/javascript" src="layer/layer.js"></script>
		<script>
			$(function() {
				$('#to_search').click(function() {
					var txt = $.trim($('#search_key').val());
					layer.load();
					$.ajax({
						type: "post",
						url: "1",
						data: {
							'search':
							txt
						},
						dataType: 'json',
						async: false,
						cache: false,
						contentType: false,
						processData: false,
						success: function(data) {
							for(var i = 0; i < data.length; i++) {
								var htmlArr = [];
								htmlArr.push("<dd class='tab_li'>");
								htmlArr.push("<div class='li_inner'>");
								htmlArr.push("<img src='images/best_recipe/tang@3x.png' alt='食谱图' />");
								htmlArr.push("<span class='food_name'>蘑菇浓汤</span>");
								htmlArr.push("<span class='author_name'>by:张某某</span>");
								htmlArr.push("<span class='see'></span></div></dd>");
								$('.tab_item dl').append(htmlArr.join(""));
							}
							layer.closeAll();

						},
						error: function(e) {
							layer.closeAll();

						}
					});
				})
			})
		</script>
	</body>

</html>